<template>
    <div class="home">
        <router-link to="/search">
            <van-nav-bar fixed placeholder>
                <template #title>
                    <div class="home-header-searchbox">
                        <span> 搜索</span>
                        <van-icon name="search" size=" 5vw" color="#fff" />
                    </div>
                </template>
            </van-nav-bar>
        </router-link>
        <!--滑动的导航  -->
        <van-tabs v-model="active" @click="swithTab">
            <van-tab v-for="item in cate" :key=item._id :title="item.name"></van-tab>

        </van-tabs>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
            <!-- 内容 -->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getArticle"
                :immediate-check="false">

                <!-- loading 来表示是否加载   初始化后 会立刻执行一次getArtList  cate_id 为空  要改为 immediate-check ="false" -->
                <div class="list">
                    <!-- <div class="list-one">
            <p>新增一条公交路线s</p>
           <van-grid :border="false" :column-num="3">
                <van-grid-item>
                    <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
                </van-grid-item>
                <van-grid-item>
                    <img src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                </van-grid-item>
                <van-grid-item>
                    <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
                </van-grid-item>
            </van-grid>
            <van-grid :border="false" :column-num="3">
                <van-grid-item>
                    <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
                </van-grid-item>
                <van-grid-item>
                    <img src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                </van-grid-item>
            </van-grid>
            <span>小王2评论2021-04-22</span>
            </div> -->
                    <div class="list-two" v-for="(item, index) in articleList" :key=item._id>
                        <p>{{ item.title }}</p>
                        <van-grid :border="false" :column-num="1">
                            <van-grid-item
                                :class="{ hide: item.poster_type == 1, rightImg: item.poster_type == 2, articleImg: item.poster_type == 3 }">
                                <img v-for="img in item.imageSrc" :src="img" />
                            </van-grid-item>
                        </van-grid>
                        <span>小王2评论2021-04-22</span>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <!-- 底部栏 -->
        <tabBar></tabBar>
    </div>
</template>

<style  lang="less">
span,
p {
    margin: 0;
    padding: 0;
}

body {
    background: #f7f8fa;
}

.home .home-header-searchbox {
    height: 32px;
    width: 270px;
    border-radius: 20px;
    background: @gren;
}

.home .home-header-searchbox span {
    line-height: 32px;
    color: #fff;
}

.home .home-header-searchbox .van-icon {
    position: relative;
    right: 53px;
    top: 1px;
}

.home .van-nav-bar__title {
    max-width: 75%;
}

// 头部
.home.van-tabs.van-tabs--line {
    border-bottom: 1px #969799 solid;
}

.home .van-tab {
    border-right: 1px #969799 solid;
}

.home .van-tabs__line {
    background-color: @green;
}

.home .list .list-one p,
.list-two p {
    margin-left: 10px;
    font-size: 14px;
}

.home img {
    width: 100%;
}

.home .list .list-one span,
.list-two span {
    display: block;
    color: #969799;
    font-size: 12px;
    margin-left: 10px;
}

.home .list-one {
    border-bottom: 2px #f5f6f7 solid;
    padding-bottom: 10px;
}

.home .van-tabs__line {
    bottom: 6vw;
    width: 4.66667vw;
}

.home .list .list-two p {
    height: 20px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.van-list__finished-text {
    margin-bottom: 40px;
}
</style>
<script>
import Tabbar from '@/components/tabBar';
import { NavBar, Icon } from 'vant';
import { getCateList, getArticleList } from '@/api/home'
export default {
    components: {
        [Tabbar.name]: Tabbar,
        [NavBar.name]: NavBar,
        [Icon.name]: Icon,
    },
    data() {
        return {
            active: 0,
            value: '搜索',
            cate: [],
            active_cate_id: '',//当前被选中的分类id
            articleList: [],
            loading: false,   //false 和true来区分什么时候可以加载
            finished: false,   // false 和true 来区分加载是否全部完成
            skip: 0,   //页数
            limit: 20 ,  //新闻条数
            isRefresh:false //是否正在刷新
            



        };
    },
    mounted() {
        this.getCate()

    },
    methods: {
        // 下拉刷新功能
        onRefresh(){
            this.skip = 0,
            this.finished = false
            this.getArticle(true)
            },
        //点击事件 切换文章列表
        swithTab() {
            this.active_cate_id = this.cate[this.active]._id
            this.articleList = []
            this.skip = 0
            this.finished = false  //状态重置
            this.getArticle()
        },
        //获取分类
        getCate() {

            getCateList().then(res => {
                console.log(res)
                this.cate = res.data

                //拿到分类数据后 去取第一栏目的id
                this.active_cate_id = this.cate[this.active]._id
                //获取目前高亮的栏目的id
                this.getArticle()
            })
        },
        //获取文章
        getArticle(flag){
            console.log('-----------------------------------')
            let { active_cate_id, skip, limit } = this
            getArticleList({
                cate_id: active_cate_id,
                skip, limit
            }).then(res => {
                console.log(res);
              
               
            
                    if(flag){
                        // 如果是刷新操作
                         this.isRefresh=false //结束刷新的转圈
                         this.articleList=res.data//从0开始 替换为新的
                    }else{
                        this.articleList.push(...res.data)// 往老数据里面，放入新数据
                    }
                  
             
      
                let len = this.articleList.length;
                //判断数据加载结束了吗？ 如果加载完了 finshed= true  反之为 false
                setTimeout(v => {
                    if (len >= res.count) {
                        //加载完成 不会触发事件 
                        this.finished = true
                    } else {
                        this.skip = len; //skip 更新
                        this.loading = false //  可以继续加载
                    }
                }, 1000)
            })
        }
    }

}

</script>